<template>
	<view>

		<!-- 查阅审批流 -->
		<u-popup id="popup-box" :show="showListApprove" mode="right" bgColor="transparent" :closeOnClickOverlay="false"
			@close="closeApprovePopup">

			<view class="content f-dc" style="width: 90vw;background-color: #fff;">
				<u-navbar title="查阅审批流" :fixed="false" :autoBack="false" leftIconColor="#fff"
					@leftClick="closeApprovePopup">
				</u-navbar>

				<scroll-view class="scroll-Y content_main" style="width: 100%;" scroll-y="true">
					<mApproveList style="zoom: 0.8;" @openPreview="openPreview"></mApproveList>
				</scroll-view>
			</view>


			<!-- 图片预览 aspectFit -->
			<m-previewImage ref="previewImage" mode="widthFix" @onLongpress="onLongpress"
				:urls="imagesPreview"></m-previewImage>
		</u-popup>
	</view>
</template>

<script>
	import mApproveList from '@/uni_modules/mc-ui/components/m-node-warp/compontent/m-approveList/m-approveList.vue';

	export default {
		components: {
			mApproveList,
		},
		data() {
			return {
				// 审批流程显示
				screenWidth: 375,
				imagesPreview: [], // 图片预览数组
				// #ifdef APP-PLUS
				eventChannel: null,
				// #endif
			};
		},
		onLoad() {
			// #ifdef APP-PLUS
			this.eventChannel = this.getOpenerEventChannel();
			// #endif
		},
		computed: {
			showListApprove() {
				return this.$store.state.st_comPageConfig.showListApprove;
			}
		},
		methods: {
			onLongpress(e) { //长按事件
				let imagePath = e;

				uni.showActionSheet({
					itemList: ['保存到手机'],
					success: function(res) {

						uni.saveImageToPhotosAlbum({
							filePath: imagePath, // 图片文件路径
							success: function() {
								uni.showToast({
									title: '已保存到相册',
									icon: 'success'
								});
							},
							fail: function(error) {
								uni.showToast({
									title: '图片保存失败，请检查权限',
									icon: 'none'
								});
							}
						});

					}
				});
			},
			openPreview(data, index) { // 预览图片
				let that = this;
				this.imagesPreview = data || [];
				if (data.length) {
					this.$refs.previewImage.open(data[index]);
				}
			},
			closeApprovePopup(type = 'cancel', data = null) { // 关闭弹层
				this.hide(type, data);

			},
			// 弹窗关闭后需要重置popupConfig数据
			hide(type, data = null) {
				let _this = this;
				// 关闭弹窗
				this.$store.commit('ChangeAndSetStateData', {
					Name1: 'st_comPageConfig.showFormApprove',
					data: true
				})
				setTimeout(() => {
					_this.$store.commit('ChangeAndSetStateData', {
						Name1: 'st_comPageConfig.showFormApprove',
						data: false
					})

					// uni.navigateBack();

					uni.navigateBack({
						delta: 1,
						success() {
							_this.eventChannel.emit(type, data);
						}
					})
				}, 100) // 这里时间就是弹窗显示隐藏动画时间
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: transparent;
	}
</style>